<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">选择模板:</p>
			</el-col>
			<el-col :span="6">
				<el-select size="small" v-model="upData.schemeId" clearable placeholder="请选择上传模板" @change="tempChange">
					<el-option v-for="item in templateCombo" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="5" style="padding-left: 2px">
				<div v-if="upData.schemeId != '' " style="clear: both;float: left">
					<el-upload :action="action" :data="upData" accept=".xlsx" name="upExecl" :on-progress="process" :on-error="error" :on-success="success" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="数据导入中，请稍后！">
						<el-button size="small" type="primary">点击上传</el-button>
						&nbsp;&nbsp;&nbsp;<span slot="tip" style="color: red;font-size: 15px;">只能上传.xlsx文件</span>
					</el-upload>
				</div>
			</el-col>
			<el-col :span="12" style="padding-left: 2px;margin-left: -10px;">
				<div style="clear:both;float:right">
					<el-button size="small" type="primary" @click="saveCheck">批量确认</el-button>
					<el-button size="small" type="primary" @click="saveAll">全部确认</el-button>
					<el-button size="small" type="primary" @click="delCheck">批量删除</el-button>
					<el-button size="small" type="primary" @click="delAll">全部删除</el-button>
					<el-button size="small" type="primary" @click="download">下载模板</el-button>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData.dataList" stripe border @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" label="选择" fixed></el-table-column>

					<!--
                            	作者：1813180149@qq.com
                            	时间：2017-02-20
                            	描述：延保
                            	-->
					<el-table-column prop="vin" label="VIN" width="200" fixed>
					</el-table-column>
					<el-table-column prop="plateNum" label="车牌号" width="150" fixed>
					</el-table-column>
					<el-table-column prop="brand" label="品牌" width="150">
					</el-table-column>
					<el-table-column prop="series" label="车系" width="200">
					</el-table-column>
					<el-table-column prop="model" label="车型" width="200">
					</el-table-column>
					<el-table-column prop="ownerName" label="车主姓名" width="120">
					</el-table-column>
					<el-table-column prop="ownerTel" label="车主电话" width="180">
					</el-table-column>
					<el-table-column prop="buyDate" label="购车日期" :formatter="timeFormate" width="150" align="center">
					</el-table-column>
					<el-table-column prop="licenceDate" label="上牌日期" :formatter="timeFormates" width="150" align="center">
					</el-table-column>
					<!--<el-table-column label="操作" width="120" fixed="right">
                                    <template scope="scope">
                                        <el-tooltip class="item" effect="light" content="确认导入" placement="top">
                                            <el-button type="primary" size="mini" icon="check" @click.native.prevent="saveImp(scope.$index)"></el-button>
                                        </el-tooltip>&nbsp;
                                        <el-tooltip class="item" effect="light" content="删除" placement="top">
                                            <el-button type="danger" size="mini" icon="circle-cross" @click.native.prevent="deleteImp(scope.$index)"></el-button>
                                        </el-tooltip>
                                    </template>
                                </el-table-column>-->
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	export default {
		data: function() {
			return {
				//等待框
				fullscreenLoading:false,
				action: this.API_ROOT + "/base/execl/upload",
				upData: {
					schemeId: '',
					uid: window.localStorage.getItem("uid"),
					token: window.localStorage.getItem("token")
				},
				//导入模板 ID

				//下拉列表数据
				templateCombo: [],
				loadingVue: null,
				/*--------------------------导入需要的数据-------------------------------*/
				//列表数据
				tableData: {
					total: 0,
					dataList: []
				},
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,

				/*-----------------------------导入需要的数据---------------------------------*/

				/*--------------------------------批量导入相关↓↓-----------------------------*/
				multipleSelection: [],
				//				selectId:[],
				/*--------------------------------批量导入相关↑↑-----------------------------*/
			    mubanData: {
					excelName: "",
					dataEntityId: "",
					excelPath: "",
					brand: ""
				},
			}
		},
		methods: {
			//chaxun xiazai xinxi
			downloadQuery: function() {
				//获取上传模板信息
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/base/execl/download/info',
					params: {
						schemeId: this.$data.upData.schemeId
					}

				}).then(function(resp) {
					debugger;

					this.$data.mubanData = resp.data.data;
				}, function(error) {
					// error
				})
			},
			//下载模板
			download: function() {
				debugger;
				if(this.$data.upData.schemeId == ""){
					this.$message.error("请先选择模板");
				}else{
					//获取上传模板信息
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/base/execl/download/info',
					params: {
						schemeId: this.$data.upData.schemeId
					}

				}).then(function(resp) {
					debugger;
					this.$data.mubanData = resp.data.data;
					if(resp.data.success == false) {
						this.$message.error("请先上传模板");
					} else {
						window.location.href = this.API_ROOT + "/base/exp/download/xlsx?fileId=" + this.$data.mubanData.dataEntityId + "&&fileName=" + this.$data.mubanData.excelName + this.moment().format("YYYYMMDDHHmmss") + "&&fileType=xlsx";
					}
				}, function(error) {
					// error
				})
				}
			},
			/*--------------------------------批量导入相关↓↓-----------------------------*/
			//选中的回调函数
			handleSelectionChange: function(val) {
				//debugger;
				this.$data.multipleSelection = val;
				//				for(var i==0;i<=multipleSelection.length;i++){
				//					this.$data.selectId.push(this.$data.multipleSelection[i].id)
				//				}
			},
			//选中的批量保存
			saveCheck: function() {
				if(this.$data.multipleSelection.length == 0) {
					this.$message.error("请选择数据！")
				} else {
					this.$http.post(this.API_ROOT + '/crm/car/impConfirms', this.$data.multipleSelection, {
						params: {
							//activityId: this.$data.activity.id,
						}
					}).then(resp => {
						if(resp.data.success) {
							this.$message(resp.data.msg);
							this.impQuery();
							//this.$data.carFormShow = false;
						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {})
				}
			},
			//选中的批量删除
			delCheck: function() {
				if(this.$data.multipleSelection.length == 0) {
					this.$message.error("请选择数据！")
				} else {
					this.$http.post(this.API_ROOT + '/crm/car/impDels', this.$data.multipleSelection, {
						params: {
							//activityId: this.$data.activity.id,
						}
					}).then(resp => {
						if(resp.data.success) {
							this.$message(resp.data.msg);
							this.impQuery();
							//this.$data.carFormShow = false;
						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {})
				}
			},
			//全部保存
			saveAll: function() {
				this.$confirm('确认要全部导入这些数据吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$data.loadingVue = this.$loading({
						fullscreen: false,
						text: "正在确认数据，请稍候"
					});

					this.$http.get(this.API_ROOT + '/crm/car/impConfirmAll', {
						params: {
							//activityId: this.$data.activity.id,
						}
					}).then(resp => {
						if(resp.data.success) {
							this.$data.loadingVue.close();
							this.$message(resp.data.msg);
							this.impQuery();
							//this.$data.carFormShow = false;
						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消此操作'
					});
				});

			},
			//全部删除
			delAll: function() {
				this.$confirm('确认要全部删除这些数据吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$data.loadingVue = this.$loading({
						fullscreen: false,
						text: "正在删除数据，请稍候"
					});

					this.$http.get(this.API_ROOT + '/crm/car/impDelAll', {
						params: {
							//activityId: this.$data.activity.id,
						}
					}).then(resp => {
						if(resp.data.success) {
							this.$data.loadingVue.close();
							this.$message(resp.data.msg);
							this.impQuery();
							//this.$data.carFormShow = false;
						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消此操作'
					});
				});

			},
			/*--------------------------------批量导入相关↑↑-----------------------------*/

			/*--------------------------导入需要的方法-------------------------------*/
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.impQuery();
			},
			//查询
			impQuery: function() {
				debugger;
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/car/impPage',
					params: {
						start: this.$data.CurentPage,
						limit: this.$data.page.pageSize
					}
				}).then(function(resp) {
					//success
					resp.data.total = parseInt(resp.data.total);
					this.$data.tableData = resp.data;
				}, function(error) {
					// error
				})
			},
			//确认导入
			saveImp: function(index) {
				this.$confirm('确认要导入这条数据吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var data = this.$data.tableData.dataList[index];
					//debugger;
					this.$http({
						method: 'POST',
						url: this.API_ROOT + '/crm/car/impConfirm',
						params: {
							id: data.id,
						}
					}).then(function(resp) {
						this.$message(resp.data.msg);
						this.impQuery();
					}, function(error) {
						// error
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消此操作'
					});
				});

			},
			//删除
			deleteImp: function(index) {
				this.$confirm('确认要删除这条数据吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var data = this.$data.tableData.dataList[index];
					//debugger;
					this.$http({
						method: 'POST',
						url: this.API_ROOT + '/crm/car/impDel',
						params: {
							id: data.id,
						}
					}).then(function(resp) {
						this.$message(resp.data.msg);
						this.impQuery();
					}, function(error) {
						// error
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消此操作'
					});
				});

			},
			timeFormate: function(row, column) {
				if(row.buyDate == "" || row.buyDate == null) return "";
				return this.moment(Number(row.buyDate)).format("YYYY-MM-DD");
			},
			timeFormates: function(row, column) {
				if(row.licenceDate == "" || row.licenceDate == null) return "";
				return this.moment(Number(row.licenceDate)).format("YYYY-MM-DD");
			},
			/*--------------------------导入需要的方法-------------------------------*/
			process: function() {
				this.$data.fullscreenLoading = true;
//				this.$data.loadingVue = this.$loading({
//					fullscreen: true,
//					text: "正在导入数据，请稍候"
//				});
			},
			error: function(err, response) {
				this.$message.error(response.data.msg);
				this.$data.fullscreenLoading = false;
			},
			success: function(response) {
				this.$data.fullscreenLoading = false;

				if(response.success) {
					this.impQuery();
					this.$message(response.msg);
					if(response.fileId != '') {
						this.$confirm('导入数据中有错误数据，是否下载错误数据?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							window.location.href = this.API_ROOT + "/base/exp/xlsx?fileId=" + response.fileId + "&&fileName=车主车辆信息导入错误数据" + this.moment().format("YYYYMMDDHHmmss") + "&&fileType=xlsx";
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消下载'
							});
						});
					}
				} else {
					this.$message.error(response.msg);
				}

			},

			//查询方案下拉列表数据
			queryTemplateCombo: function() {
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/base/execl/combo',

				}).then(function(resp) {

					this.$data.templateCombo = resp.data;
				}, function(error) {
					// error
				})
			},
			tempChange: function(newValue) {
				window.localStorage.setItem("carTemplate", newValue);
			}
		},
		created: function() {
			/*--------------------------导入需要的方法-------------------------------*/
			//加载列表
			this.impQuery();
			/*--------------------------导入需要的方法-------------------------------*/
			//获取方案下拉列表
			this.queryTemplateCombo();
			var temp = window.localStorage.getItem("carTemplate");
			if(temp && temp != null && temp.length > 10) {
				this.$data.upData.schemeId = temp;
				this.$data.upData.schemeId = temp;
			}
		}
	}
</script>
<style>
	.el-upload {
		clear: both;
	}
</style>